<template>
  <div>
    <!-- 查询条件 -->
    <a-card title="碳排放数据查询" bordered style="margin-bottom: 10px">
      <a-row :gutter="16">
        <a-col span="10">
          <a-form-item label="时间范围">
            <a-range-picker v-model="dateRange" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col span="4">
          <a-button type="primary" @click="searchData">查询</a-button>
          <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
        </a-col>
      </a-row>
    </a-card>

    <!-- 碳排放数据统计 -->
    <a-card title="碳排放数据统计" bordered style="margin-bottom: 10px">
      <a-row :gutter="16">
        <a-col span="6">
          <a-card>
            <p>累计碳排量</p>
            <h2>{{ totalEmissions }} 吨</h2>
          </a-card>
        </a-col>
        <a-col span="6">
          <a-card>
            <p>本月碳排量</p>
            <h2>{{ monthlyEmissions }} 吨</h2>
          </a-card>
        </a-col>
        <a-col span="6">
          <a-card>
            <p>环比碳排量</p>
            <h2>{{ monthOnMonthChange }} 吨</h2>
          </a-card>
        </a-col>
        <a-col span="6">
          <a-card>
            <p>同比碳排量</p>
            <h2>{{ yearOnYearChange }} 吨</h2>
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <!-- 本月各排放源占比图 -->
    <a-card title="本月各排放源占比" bordered style="margin-bottom: 10px">
      <a-row>
        <a-col span="12">
          <a-card title="占比图" bordered style="margin-right: 5px">
            <div style="height: 396px">
              <echart :option="sourceProportionOption" name="sourceProportionOption" />
            </div>
          </a-card>
        </a-col>
        <a-col span="12">
          <a-card title="详细数据" bordered style="margin-left: 5px">
            <a-table
              :dataSource="sourceDetails"
              :columns="sourceColumns"
              rowKey="source"
              style="min-height: 332px; max-height: 396px"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-card>

    <!-- 本月各排放类型占比图 -->
    <a-card title="本月各排放类型占比" bordered>
      <a-row>
        <a-col span="12">
          <a-card title="占比图" bordered style="margin-right: 5px">
            <div style="height: 396px">
              <echart :option="typeProportionOption" name="typeProportionOption" />
            </div>
          </a-card>
        </a-col>
        <a-col span="12">
          <a-card title="详细数据" bordered style="margin-left: 5px">
            <a-table
              :dataSource="typeDetails"
              :columns="typeColumns"
              rowKey="type"
              style="min-height: 332px; max-height: 396px"
            />
          </a-card>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Echart from "../../../../../components/e-chart.vue"; // 假设使用自定义的饼图组件

// 时间范围
const dateRange = ref(null);

// 数据模拟
const totalEmissions = ref(12000); // 累计碳排放量
const monthlyEmissions = ref(1000); // 本月碳排放量
const monthOnMonthChange = ref(50); // 环比碳排放量变化
const yearOnYearChange = ref(200); // 同比碳排放量变化

// 本月各排放源占比数据
const sourceProportionData = ref([
  { name: "燃烧设备", value: 40 },
  { name: "工艺过程", value: 20 },
  { name: "自营交通工具", value: 15 },
  { name: "外购电力热力", value: 15 },
  { name: "上下游排放", value: 10 },
]);

// 本月各排放源详细数据
const sourceDetails = ref([
  { source: "燃烧设备", emissions: "400 吨", proportion: "40%" },
  { source: "工艺过程", emissions: "200 吨", proportion: "20%" },
  { source: "自营交通工具", emissions: "150 吨", proportion: "15%" },
  { source: "外购电力热力", emissions: "150 吨", proportion: "15%" },
  { source: "上下游排放", emissions: "100 吨", proportion: "10%" },
]);

// 本月各排放源详细表格列
const sourceColumns = [
  { title: "排放源", dataIndex: "source", key: "source" },
  { title: "碳排放量", dataIndex: "emissions", key: "emissions" },
  { title: "占比", dataIndex: "proportion", key: "proportion" },
];

// 本月各排放类型占比数据
const typeProportionData = ref([
  { name: "S1", value: 50 },
  { name: "S2", value: 30 },
  { name: "S3", value: 20 },
]);

// 本月各排放类型详细数据
const typeDetails = ref([
  { type: "S1", emissions: "500 吨", proportion: "50%" },
  { type: "S2", emissions: "300 吨", proportion: "30%" },
  { type: "S3", emissions: "200 吨", proportion: "20%" },
]);

// 本月各排放类型详细表格列
const typeColumns = [
  { title: "排放类型", dataIndex: "type", key: "type" },
  { title: "碳排放量", dataIndex: "emissions", key: "emissions" },
  { title: "占比", dataIndex: "proportion", key: "proportion" },
];
// 累计碳排放量饼图（示例）
const totalEmissionsOption = {
  title: {
    text: "累计碳排放量",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "累计碳排放量",
      type: "pie",
      radius: "50%",
      data: [{ value: 12000, name: "累计排放" }],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

// 本月各排放源占比图
const sourceProportionOption = {
  title: {
    text: "本月各排放源占比",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "排放源占比",
      type: "pie",
      radius: "50%",
      data: [
        { value: 40, name: "燃烧设备" },
        { value: 20, name: "工艺过程" },
        { value: 15, name: "自营交通工具" },
        { value: 15, name: "外购电力热力" },
        { value: 10, name: "上下游排放" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

// 本月各排放类型占比图
const typeProportionOption = {
  title: {
    text: "本月各排放类型占比",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b}: {c} ({d}%)",
  },
  legend: {
    orient: "vertical",
    left: "left",
  },
  series: [
    {
      name: "排放类型占比",
      type: "pie",
      radius: "50%",
      data: [
        { value: 50, name: "S1" },
        { value: 30, name: "S2" },
        { value: 20, name: "S3" },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
};

// 查询和重置功能
const searchData = () => {
  // 查询逻辑
};

const resetForm = () => {
  dateRange.value = null;
};
</script>

<style scoped>
a-layout {
  background: #f0f2f5;
}

a-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

a-button {
  margin-top: 16px;
}

h2 {
  color: #1890ff;
  font-weight: bold;
}
</style>
